<template>
  <div class="video-container">
    <div class="video-cover">
      <img 
        :src="video.cover || defaultCover" 
        :alt="video.title"
        @error="handleImageError"
      />
    </div>
    <div class="video-title">
      {{ video.title }}
    </div>
    <div class="video-author">
      {{ video.author }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface Video {
  id: number
  title: string
  author: string
  cover?: string
}

interface Props {
  video: Video
}

const props = defineProps<Props>()

// 默认封面
const defaultCover = ref('/src/assets/images/default-cover.png')

// 处理图片加载错误
const handleImageError = (event: Event) => {
  const target = event.target as HTMLImageElement
  target.src = defaultCover.value
}
</script>

<style scoped>
.video-container {
  display: flex;
  flex-direction: column;
  width: 280px;
  margin-bottom: 20px;
}

.video-cover {
  width: 100%;
  height: 180px;
  overflow: hidden;
  margin-bottom: 12px;
  background-color: #f0f0f0;
}

.video-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.2);
}

.video-title {
  font-size: 16px;
  font-weight: 500;
  color: white;
  text-align: left;
  margin-bottom: 4px;
}

.video-author {
  font-size: 14px;
  color: white;
  text-align: left;
}
</style>